<template>
  <div>
    <el-row :gutter="20">
      <!-- 主要内容区域，占据一列 -->
      <el-col :span="1">
        <div style="width: 1400px;height: 600px" id="main">

        </div>
      </el-col>
      <!-- 辅助信息区域，占据两列 -->
      <el-col :span="2">
        <div id="main1">

        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listCount } from '@/api/count/count'
import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

// 使用echarts的必要组件和图表类型
echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
]);

export default {
  // 组件挂载后执行的初始化方法
  mounted() {
    this.sptj1();
  },
  // 组件创建后执行的初始化方法，与mounted区别在于执行时机
  created() {
    this.sptj1();
  },
  data() {
    return {
      // 组件数据定义
    }
  },
  methods: {
    // 初始化并配置图表的方法
    sptj1() {
      // 获取图表容器
      const chartDom = document.getElementById('main');
      // 初始化图表，使用'dark'主题
      const myChart = echarts.init(chartDom, 'dark');
      // 请求数据
      listCount().then(res => {
        var bgs = [];
        let array = res;
        // 处理返回的数据，格式化为echarts要求的格式
        for (let arrayKey in array) {
          bgs.push({
            value: array[arrayKey].count,
            name: array[arrayKey].name
          });
        }
        // 配置图表选项
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [{
            name: '数量',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: 'black',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                color: 'red',
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: bgs
          }]
        };
        // 应用配置选项到图表
        option && myChart.setOption(option);
      });
    }
  }
};
</script>

